/**
 * Copyright © 2016-2025 The Thingsboard Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import '../../../../../scss/constants';

:host {
  display: flex;
  flex: 1 1 0;
  width: 100%;
  height: 100%;

  .tb-two-factor-auth-login-content {
    background-color: #eee;

    .tb-two-factor-auth-login-card {
      max-height: 100vh;
      overflow: auto;
      padding: 48px 48px 48px 16px;

      @media #{$mat-xs} {
        height: 100%;
      }

      @media #{$mat-gt-xs} {
        width: 450px !important;
      }

      .mat-mdc-card-title {
        font: 400 28px / 36px Roboto, "Helvetica Neue", sans-serif;
      }

      .mat-mdc-card-header {
        padding: 0;
      }

      .mat-mdc-card-content {
        margin-top: 34px;
        margin-left: 40px;
        padding: 0;
      }

      .mat-body {
        letter-spacing: 0.25px;
        line-height: 16px;
      }

      .backup-code {
        p {
          text-align: justify;
        }

        .container {
          border: 1px solid;
          border-radius: 4px;
          gap: 16px;
          display: grid;
          grid-template-columns: 1fr 1fr;
          justify-items: center;
          padding: 16px 0;
          margin-bottom: 16px;

          .code {
            letter-spacing: 0.25px;
            font-family: Roboto Mono, "Helvetica Neue", monospace;
          }
        }

        .action-buttons {
          margin-bottom: 40px;
        }
      }
    }
  }

  ::ng-deep {
    .tb-two-factor-auth-login-content {
      .tb-two-factor-auth-login-card {
        button.mat-mdc-icon-button {
          .mat-icon {
            color: rgba(255, 255, 255, 0.8);
          }
        }
      }
      .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper {
        color: rgba(255, 255, 255, 0.8);
      }
    }

    button.provider, button.navigation {
      text-align: start;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
      &:not([disabled][disabled]) {
        border-color: rgba(255, 255, 255, .8);
      }
    }
  }
}
